<template>
  <div class="category-item">
    <div class="category-item__wrapped">
      <img :src="icon" />
    </div>
    <span class="category-item__label">{{ label }}</span>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    label: string;
    icon: string;
    value: string;
  }>(),
  {
    label: "",
    icon: "",
    value: "",
  }
);
</script>

<style lang="less">
.category-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  &__wrapped {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &__label {
    font-size: 24px;
    color: #000;
    font-weight: 400;
  }
}
</style>
